const express = require('express');
const Vue = require('vue');
const { createRenderer } = require('vue-server-renderer');

const server = express();

// 创建 Vue SSR 渲染器
const renderer = createRenderer();

// 处理所有路由
server.get('*', (req, res) => {
  // 创建 Vue 实例
  const app = new Vue({
    data: {
      message: 'Hello, SSR!',
      url: req.url
    },
    template: `
      <div>
        <h1>{{ message }}</h1>
        <p>Current URL: {{ url }}</p>
      </div>
    `
  });

  // 渲染为 HTML
  renderer.renderToString(app, (err, html) => {
    if (err) {
      console.error(err);
      return res.status(500).send('Server Error');
    }

    // 返回完整的 HTML 页面
    res.send(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Vue SSR Example</title>
        </head>
        <body>
          ${html}
        </body>
      </html>
    `);
  });
});

// 启动服务器
server.listen(3000, () => {
  console.log('Server running on http://localhost:3000');
});
